<template>
  <view class="box" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <view class="move" :style="strMove">
      <view class="show">
        <slot name="show"></slot>
      </view>
      <view class="hide" ref="hideNode">
        <slot name="hide"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from 'vue';


const { proxy } = getCurrentInstance();
const props = defineProps();
const emit = defineEmits(["leftSwipe", "rightSwipe"]);
let move = ref(0)
let strMove = computed(() => {
  return `transform: translateX(${move.value}px);`
})
let hideNode = ref(null);
let startX = 0;
let startY = 0;
let lastmoveX = 0;
let moveX = 0;

let moveY = 0;
let hideWidth = 0;


let moveEnable = true;


function handleTouchStart(event) {
  if (!moveEnable) return
  startX = event.touches[0].pageX;
  startY = event.touches[0].pageY;
}


function handleTouchMove(event) {
  if (!moveEnable) return;
  moveX = event.touches[0].pageX - startX;
  moveY = event.touches[0].pageY - startY;
  // 检测是否是水平滑动
  if (Math.abs(moveX) > Math.abs(moveY) && Math.abs(moveX) > 0) {
    // 如果是右滑

    if (moveX > 0) {
      if (move.value < 0) {
        // 触发右滑事件
        let moveRight = move.value + moveX - lastmoveX
        if (moveRight > 0) moveRight = 0
        rightSwipeDef(moveRight)
        lastmoveX = moveX

        emit("rightSwipe");
      }
    }
    // 如果是左滑
    if (moveX < 0) {
      uni.createSelectorQuery()
        .in(proxy)
        .select(".hide") // 也可以使用 this.$refs.myElement 作为选择器
        .boundingClientRect() // 获取节点布局信息
        .exec((res) => {
          if (res && res[0]) {
            const width = res[0].width;

            hideWidth = width;
          } else {
            hideWidth = 200
          }
        });
      // console.log(hideWidth, "dsadsad");
      if (!(move.value <= -hideWidth)) {
        // 触发左滑事件
        leftSwipeDef((move.value + moveX - lastmoveX))
        lastmoveX = moveX
        emit("leftSwipe")
      }
    }
  }
}

function linearDecrease(move, target, durationMs) {
  let startNumber = move.value
  let decrementStep = startNumber / (durationMs / 10);

  // 使用 setInterval 来每10毫秒减少一次值，直到达到或低于0
  let intervalId = setInterval(() => {
    if (startNumber > target) {
      move.value += decrementStep;
    } else {
      move.value -= decrementStep;
    }
    if (move.value <= (target - decrementStep) && move.value >= (target + decrementStep)) {
      move.value = target;
      clearInterval(intervalId); // 清除定时器
      moveEnable = true
    }
  }, 10);
}
function handleTouchEnd() {
  if (!moveEnable) return
  startX = 0;
  startY = 0;
  moveX = 0;
  moveY = 0;
  lastmoveX = 0;
  moveEnable = false
  if (move.value > -(hideWidth / 2.5)) {
    linearDecrease(move, 0, 200);
  } else {
    linearDecrease(move, -hideWidth, 200);
  }
}

function leftSwipeDef(movePx) {
  move.value = movePx;
}
function rightSwipeDef(movePx) {
  move.value = movePx;
}






</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;

  .move {
    width: 160%;
    height: 100%;
    display: flex;
    transform: translateX(0);

    .show {
      width: 62.5%;
      height: 100%;
    }

    .hide {
      height: 100%;
    }
  }
}
</style>